<template>
  <view class="container">
    <view class="order-box">
      <view class="flex-ac box-title">
        <view class="line"></view>
        <view>送取司机</view>
      </view>
      <view class="flex pickback">
        <view>取车司机</view>
        <view class="value" @click="open(2)">{{ form.backDriverName ? form.backDriverName : '请选择取车司机' }}</view>
      </view>
    </view>
    <view class="order-box">
      <view class="flex-ac box-title">
        <view class="line"></view>
        <view>车辆外观</view>
      </view>
      <view class="flex-wrap file-box">
        <UploadFile title="正面" @upload="handleUpload" type="1" />
        <UploadFile title="左正面" @upload="handleUpload" type="2" />
        <UploadFile title="右正面" @upload="handleUpload" type="3" />
        <UploadFile title="左侧面" @upload="handleUpload" type="4" />
        <UploadFile title="右侧面" @upload="handleUpload" type="5" />
        <UploadFile title="背面" @upload="handleUpload" type="6" />
        <UploadFile title="左背面" @upload="handleUpload" type="7" />
        <UploadFile title="右背面" @upload="handleUpload" type="8" />
      </view>
      <!-- <view class="mg40">
        <view class="flex-ac">
          <view>车损确认</view>
          <up-radio-group v-model="value" placement="row" activeColor="#986C5D" class="ml80" size="17" labelSize="12"
            labelColor="#000">
            <up-radio label="有车损" name="0"></up-radio>
            <up-radio label="无车损" name="1" class="ml20"></up-radio>
          </up-radio-group>
        </view>
        <view class="flex-wrap file-box">
          <UploadFile title="车前" />
          <UploadFile title="车后" />
          <UploadFile title="左侧" />
          <UploadFile title="右侧" />
        </view>
      </view> -->
    </view>
    <view class="order-box">
      <view class="flex-ac box-title">
        <view class="line"></view>
        <view>车辆内饰</view>
      </view>
      <view class="flex-wrap file-box">
        <UploadFile title="仪表盘" />
        <UploadFile title="车辆内饰视频" />
      </view>
    </view>
    <view class="order-box">
      <view class="flex-ac box-title">
        <view class="line"></view>
        <view>车辆状态</view>
      </view>

      <view class="flex-ac mt20">
        <view class="left-label">油量</view>
        <up-input placeholder="请输入" border="none" color="#999" v-model="form.residueOil"></up-input>
      </view>
      <view class="flex-ac mt20">
        <view class="left-label">电量</view>
        <up-input placeholder="请输入" border="none" color="#999" v-model="form.residueElc"></up-input>
      </view>
      <view class="flex-ac mt20">
        <view class="left-label">总里程</view>
        <up-input placeholder="请输入" border="none" color="#999" v-model="form.totalMileage"></up-input>
      </view>
    </view>
    <up-button type="primary" color="#000" text="确认还车" @click="handleClick" class="mt120"></up-button>
    <CustomPopup :list="model.list" :pro="{ key: 'nickname', value: 'phone' }"
      :title="model.currentType == 1 ? '送车司机' : '取车司机'" ref="showPopup" @select="handleSelect">
    </CustomPopup>
  </view>
</template>
<script setup>
import { ref, reactive } from "vue";
import CustomPopup from "@/components/custom-popup/index.vue";
import { onLoad } from "@dcloudio/uni-app";
import UploadFile from "@/components/uploadFile/index.vue"
import { postRequest } from "../../reuqest/request";

const props = defineProps({
  order: {
    type: Object,
    default: () => ({})
  }
})
const showPopup = ref(null);

const model = reactive({
  param: {},
  list: [],
  currentType: ""
});

const form = reactive({
  orderUuid: "",
  residueOil: "",
  residueElc: "",
  totalMileage: "",
  pickDriverName: "",
  pickDriverMobile: "",
  backDriverName: "",
  backDriverMobile: "",
  picList: [],//派送图片类型 1-正面; 2-左正面; 3-右正面; 4-左侧面; 5-右侧面; 6-背面; 7-左背面; 8-右背面;

})

const confirm = () => {
  postRequest("/wx-operation/api/v1/bm/order/delivery/back", { ...form, orderUuid: props.order.uuid }).then(res => {
    if (res.bizCode === "00000") {
      console.log(res.data);
      if (res.data) {
        uni.$u.toast("还车成功");
      }
    }
  });
}

const handleClick = () => {
  console.log(form, props.order);
  uni.showModal({
    title: '提示',
    content: '确认还车吗？',
    success: function (res) {
      if (res.confirm) {
        console.log('用户点击确定');
        confirm()
      }
    }
  });
};

const handleUpload = (file) => {
  console.log(file);
  const index = form.picList.findIndex(item => item.deliveryPicType == file.type);
  if (index !== -1) {
    form.picList.splice(index, 1);
  }
  if (file.uuid) {
    form.picList.push({
      deliveryPicType: file.type,
      deliveryPicUuid: file.uuid
    });
  }
}

const handleSelect = (item) => {
  console.log(item);
  if (model.currentType == 1) {
    form.pickDriverName = item.nickname;
    form.pickDriverMobile = item.phone;
  } else {
    form.backDriverName = item.nickname;
    form.backDriverMobile = item.phone;
  }
}

const close = () => {
  showPopup.value.close()
}
const open = (type) => {
  showPopup.value.open()
  model.currentType = type;
}

const getUser = () => {
  postRequest("/wx-operation/api/v1/bm/tenant/user/page", {
    pageNum: 1,
    pageSize: 5000,
  }).then(res => {
    if (res.bizCode === "00000") {
      console.log(res.data);
      model.list = res.data?.list || [];
    }
  });
}

getUser()

onLoad((options) => {
  console.log(options, "-------");
  if (options.param) {
    model.param = JSON.parse(options.param);
  }
})
</script>
<style lang="scss" scoped>
.container {

  .order-box {
    margin-bottom: 32rpx;

    .title view {
      font-weight: bold;
    }

    .pickback {
      line-height: 80rpx;

      &:last-child {
        border-top: 1px solid #EBEBEB;
      }
    }

    .value {
      color: #999999;
      margin-left: 24rpx;
      padding-left: 20rpx;
    }

    .file-box {
      gap: 32rpx 45rpx;
    }
  }

  .mg40 {
    margin: 40rpx 0;
  }

  .left-label {
    width: 100rpx;
    margin-right: 20rpx;
  }
}
</style>